import React, { useState, memo, useCallback } from 'react'; // 导入useState和memo
import { View, Button, Text } from 'react-native';
export default function App() {
  const [num, setNum] = useState(0);

  // 这个函数 在父组件重新渲染、更新的时候    生成！！！
  const cb = useCallback(() => {
    console.log('爹爹来信啦：闺女，近来可好？');
  }, []); // 依赖项发生改变

  return (
    <View>
      <Button title={num.toString()} onPress={() => setNum(num + 1)} />
      {/* 
        向memo包装的子组件传递记忆化的回调函数
        因为cb是记忆化的（不会重新创建），所以子组件不会重新渲染
      */}

      {/* 修改父组件的状态， 也会让子组件  重新创建  浪费性能 memo函数来优化 */}
      <MemoSOn cb={cb} />
    </View>
  );
}

const Son = ({ cb }: { cb: () => void }) => {
  console.log('son 创建');
  return (
    <View>
      {/* 使用从父组件传递的回调函数 */}
      <Button title='cb' onPress={cb} />
      <Text>Son</Text>
    </View>
  );
};
// 使用memo包装子组件
const MemoSOn = memo(Son);